<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<title>创生英语班级口语报告</title>
		<meta name="keywords" content="分享报告" />
		<meta name="description" content="分享报告" />
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css" />
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<script type="text/javascript" src="js/api.js"></script>
		<!-- fonticon -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
		<!-- animate.css -->
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
		<!-- layer -->
		<script type="text/javascript" src="plugins/layer_mobile/layer.js"></script>
		<script src="https://cdn.bootcss.com/Base64/1.0.2/base64.js"></script>
		<style>
			body {
				background-color: #ffffff;
			}

			header {
				background-color: #FFFFFF;
			}

			header span {
				font-weight: bold;
				color: #535353;
			}
		</style>
		<style>

			.shareBtn {
			    background: #4581db;
			    display: block;
			    border-radius: 1.875rem;
			}
			
			.liNone {
				display: none;
			}

			/* .grid .box {
			border: 1px solid #f1f1f1;
		} */
			.english-star {
				border-bottom: 1px solid #f4f4f4;
			}
			/*css样式*/
			[v-cloak] {
				  display: none;
				}
		
		</style>
		<script>
// 			$(function() {
// 				$("#loading").show();
// 			});
		</script>
	</head>

	<body class="fadeIn animated">
		<div id="message" >
			<header id="header" class="ui-header clearfix w75 h10 h8 f46 pl3 pr3 color8 t-c o-h" style="display: none;">
				<div class="ui-header-l fl w5">
					<img id="btn_back" @click="back()" src="img/ic_back_top.png" class="radius-o" style="line-height: 1rem;" />
				</div>

				<div class="ui-header-c f32 h10" style="line-height: 1rem;">
					<span>
						分享班级报告
					</span>
				</div>
			</header>

			<div class="grid t-c clearfix" style="color: #848484;line-height: 1rem;background-color: #f7faff;" v-cloak>
				<div class="box col-3 h10 f30">{{classesGrade}}</div>
				<div class="box col-9 h10 f30">练习时间:<span style="color:#36c86b ;">{{times}}</span></div>
			</div>
			<!-- 英语之星----------------------------------------------- -->
			<div class="grid  clearfix english-star" style="line-height: 1rem;">
				<div class="grid clearfix" style="background: #FFFFFF;">
					<div class="box col-12 h10 f30"><span class="f30" style="color: #343d4a;font-weight: bold;margin-left: 0.3rem;">优秀之星</span><span
						 class="f28" style="color: #848484;margin-left: 0.3rem;">平均分与完成率最高</span></div>
				</div>
			</div>
			<div class="grid  clearfix">
				<div class="grid clearfix h33" style="background: #FFFFFF;">
					<div class="box t-c col-4 h33">
						<div class="t-c h20 w20" style="position: relative;left: 20%;top:23%" v-if="english_star2!== undefined && english_star2.img!==undefined">
							<img :src="english_star2.img" class="w11 h11 radius-o" style="position: absolute;left:10%;top:3%" />
							<img src="img/ic_no.2.png" class="w15 radius-o" style="position: absolute;left:0;top:0" />
						</div>

						<div class="f2" style="line-height: 0.5rem;margin-top: 0.2rem;" v-cloak>
							<p class="f30" style="color: #6a6a6a;" v-if="english_star2 != null">{{english_star2.username}}</span>
							<p class="f30" style="color: #6a6a6a;" v-if="english_star2 != null">{{english_star2.avgscore | numFilter}}分</span>
						</div>
					</div>
					<div class="box t-c col-4 h33" style="background: #FFFFFF;">
						<div class="t-c h20 w20" style="position: relative;left: 10%;top:10%" v-if="english_star1!== undefined && english_star1.img!==undefined">
							<img :src="english_star1.img" class="w15 h15 radius-o" style="position: absolute;left:11%;top:3.5%" />
							<img src="img/ic_no.1.png" class="w20 radius-o" style="position: absolute;left:0;top:0" />
						</div>

						<div class="f2" style="line-height: 0.5rem;margin-top: 0.2rem;" v-cloak>
							<p class="f30" style="color: #6a6a6a;" v-if="english_star1 != null">{{english_star1.username}}</span>
								<p class="f30" style="color: #6a6a6a;" v-if="english_star1 != null">{{english_star1.avgscore | numFilter}}分</span>
						</div>

					</div>
					<div class="box t-c col-4 h33" style="background: #FFFFFF;">

						<div class="t-c h20 w20" style="position: relative;left: 20%;top:22%" v-if="english_star3!== undefined && english_star3.img!==undefined">
							<img :src="english_star3.img" class="w11 h11 radius-o" style="position: absolute;left:10%;top:3%" />
							<img src="img/ic_no.3.png" class="w15 radius-o" style="position: absolute;left:0;top:0" />
						</div>

						<div class="f2" style="line-height: 0.5rem;margin-top: 0.2rem;" v-cloak>
							<p class="f30" style="color: #6a6a6a;" v-if="english_star3 != null">{{english_star3.username}}</span>
								<p class="f30" style="color: #6a6a6a;" v-if="english_star3 != null">{{english_star3.avgscore | numFilter}}分</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 英语之星----------------------------------------------- -->
			<div style="background-color: #f7faff;padding-top: 0.3rem;">
				<div class="grid  clearfix english-star" style="line-height: 1rem;">
					<div class="grid clearfix" style="background: #FFFFFF;">
						<div class="box col-12 h10 f30"><span class="f30" style="color: #343d4a;font-weight: bold;margin-left: 0.3rem;">学生练习情况</span></div>
					</div>
				</div>

			</div>
			<div class="grid  clearfix" style="line-height: 1rem;">
				<div class="grid clearfix" style="background: #FFFFFF;">
					<div class="box col-3 t-c h10 f30"><span class="f30" style="color: #343d4a;font-weight: bold;">姓名</span></div>
					<div class="box col-2 t-c h10 f30"><span class="f30" style="color: #343d4a;font-weight: bold;">练习次数</span></div>
					<div class="box col-4 t-c h10 f30"><span class="f30" style="color: #343d4a;font-weight: bold;">完成率</span></div>
					<div class="box col-3 t-c h10 f30"><span class="f30" style="color: #343d4a;font-weight: bold;">练习平均分</span></div>
				</div>
			</div>
			<div class="grid  clearfix" style="line-height: 1rem;" v-for="(item, index) in data_report" v-cloak>
				<div class="grid clearfix" style="background: #f7faff;" v-if="index%2 ==0" onclick="itemView()">
					<div class="box col-3 t-c h10 f30"style="color: #343d4a;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><span class="f30" style="color: #343d4a;">{{item.username}}</span></div>
					<div class="box col-2 t-c h10 f30"><span class="f30" style="color: #343d4a;">{{item.times}}</span></div>
					<div class="box col-4 t-c h10 f30"><span class="f30" style="color: #343d4a;">{{item.nums}}/{{item.counts}}({{[item.nums,item.counts] | numLawFilter}}%)</span></div>
					<div class="box col-3 t-c h10 f30"><span class="f30" style="color: #343d4a;">{{item.avgscore | numFilter}}分</span></div>
				</div>
				<div class="grid clearfix" style="background: #FFFFFF;" v-else v-cloak>
					<div class="box col-3 t-c h10 f30" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><span class="f30" style="color: #343d4a;">{{item.username}}</span></div>
					<div class="box col-2 t-c h10 f30"><span class="f30" style="color: #343d4a;">{{item.times}}</span></div>
					<div class="box col-4 t-c h10 f30"><span class="f30" style="color: #343d4a;">{{item.nums}}/{{item.counts}}({{[item.nums,item.counts] | numLawFilter}})%</span></div>
					<div class="box col-3 t-c h10 f30"><span class="f30" style="color: #343d4a;">{{item.avgscore | numFilter}}分</span></div>
				</div>
			</div>
			<!-- <img src="img/ic_zhankaixiao.png" style="margin-left: 0.1rem;margin-top: -0.05rem;"/> -->

			<!-- <div id="loading" style="background-color: #000000;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;position: absolute;left:37%;top:40%;padding:0.3rem;border-radius:5px"
			 align="center">
				<img src="img/ic_svstatus_loading.png" class="w10 h10" id="wait-icon" />
				<div style="color:#ffffff;margin-top:0.1rem" class="h5">正在加载...</div>
			</div> -->


			<div class="t-c h10" style="background-color: #FFFFFF;line-height: 1rem;color:#FFFFFF;visibility: hidden;" @click="Share()">
				<div style="padding-bottom: 0.2rem;background-color: #FFFFFF;padding-top: 0.2rem;padding-left: 0.3rem;padding-right: 0.3rem;">
					<a href="javascript:;" class="shareBtn f28" style="color: #FFFFFF;">分享报告</a>
				</div>
			</div>
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js"></script>
	<!-- 百度 CDN: -->
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#message',
			data: {
				params: getQueryString("params"),
				terminal: '',
				times: "",
				classesGrade: "",
				data_report: [],
				english_star1: [], //英语之星1
				english_star2: [], //英语之星2
				english_star3: [], //英语之星3
				imgUrl: "img/ic_no.3.png",
			},
			mounted: function() {
				this.isterminal();
				this.weekInfo();
			},
			methods: {
				//判断 android ios
				isterminal: function() {
					if (browser.versions.iPhone || browser.versions.iPad) {
							$("#header").hide();
					}
				},
				weekInfo: function() {
					var b = new Base64();
					var str = b.decode(this.params);
					var objParams = JSON.parse(str);
					// console.log(objParams);
					//分享报告请求方法
					this.$http.post(spokenDataApi, objParams, {
						emulateJSON: true
					}).then(function(res) {
						if (res.data.error_code == 200) {
							let shareInfo = res.data.data;
							// console.log(shareInfo);
							this.english_star1 = shareInfo[0]; //英语之星
							this.english_star2 = shareInfo[1];
							this.english_star3 = shareInfo[2];
							this.data_report = shareInfo;

							this.times = formatUnixtimestamp(objParams.start_time) + "/" + formatUnixtimestamp(objParams.end_time);
							this.classesGrade = numberCase(objParams.grade) + "年级" + objParams.classes + "班";

							
						} else {
							//请求错误
							window.android.errorMsg(res.data.info);
						}

						// $("#loading").hide();

					}).catch(e => {
						// 打印一下错误
						console.log(e);
					})
				},
				back: function() {
					if (browser.versions.android) {
						console.log('-------------------打印成功，走了调用安卓分享---------------------');
						AndroidBack.onX5ButtonClicked();
					}
				}
			},
			filters: {
				numFilter(value) {
					// 截取当前数据到小数点后三位
					let transformVal = parseFloat(value).toFixed(3)
					let realVal = transformVal.substring(0, transformVal.length - 1)
					if(realVal == 'NaN'){
						realVal = 0;
					}
					// num.toFixed(3)获取的是字符串
					return parseFloat(realVal)
				},
				numLawFilter([num, count]) {
					let law = num / count * 100;
					// 截取当前数据到小数点后三位
					let transformVal = parseFloat(law).toFixed(0);
					
					if(transformVal == 'NaN'){
						transformVal = 0;
					}
					
					// console.log(transformVal);
					
					//     let realVal = transformVal.substring(0, transformVal.length - 1)
					// num.toFixed(3)获取的是字符串
					return parseFloat(transformVal)
				}

			}
		});

	</script>
</html>
